import { createElement, render, Component } from "./toy-react.js";

// class MyComponent extends Component {
//   // 1. 实现state-添加构造函数
//   constructor() {
//     super();
//     this.state = {
//       a: 1,
//       b: 22,
//     };
//   }
//   render() {
//     return (
//       <div>
//         <h1>My compoent</h1>
//         <span>{this.state.a.toString()}</span>
//         <button
//           onclick={() => {
//             this.setState({
//               a: this.state.a + 1,
//             });
//           }}
//         >
//           add
//         </button>
//         <span>{this.state.b.toString()}</span>
//       </div>
//     );
//   }
// }

// render(
//   <MyComponent id="a" class="c">
//     <div>1</div>
//     <div>2</div>
//   </MyComponent>,
//   document.body
// );

// react 教程demo
class Square extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }
}

class Board extends Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

render(
  <Game />,
  document.getElementById('root')
);
